¿Cómo puedo configurar la clase "activa" de la barra de navegación de Bootstrap en Angular 2? Solo encontré Angular 1 way .
Cuando voy a la página Acerca de, agrego class="active" a Acerca de y elimino class="active" en Inicio .
<ul class="nav navbar-nav"> <li class="active"><a [routerLink]="['Home']">Home</a></li> <li><a [routerLink]="['About']">About</a></li></li> </ul>Gracias
Si usa el nuevo 3.0.0. enrutador de componentes ( https://github.com/angular/vladivostok ) puede usar la directiva routerLinkActive . No se requiere más javascript.
<ul class="nav navbar-nav"> <li [routerLinkActive]="['active']"> <a [routerLink]="['one']">One</a></li> <li [routerLinkActive]="['active']"> <a [routerLink]="['second']">Second</a></li> </ul>Usé "@angular/router": "^3.0.0-alpha.7"
La respuesta de Bert Deterd es correcta, pero hay una cosa que se puede agregar.
Si una ruta es una subcadena de otra ruta, verá que sucede algo como esto: 2 anclas activas
Puede agregar esto para que coincida solo con las rutas exactas:
[routerLinkActiveOptions]="{exact:true}"Ejemplo completo:
<ul class="nav navbar-nav"> <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"> <a [routerLink]="['/']">Home</a> </li> <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"> <a [routerLink]="['/about']">About</a> </li> <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"> <a [routerLink]="['/calendar']">Calendar</a> </li> </ul>Para la última versión de Angular2 RC4, funciona el siguiente código simple:
<li [class.active]="router.url==='/about'"><a [routerLink]="['/about']">About</a></li>Usando import {Router} from "@angular/router"; y poner el enrutador en el constructor.